﻿@{
    ViewBag.Title = "About Us";
    Layout = null;
}



<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>

    <!-- ==============================================
		Title and Meta Tags
		=============================================== -->
    <meta charset="utf-8">
    <title>CreativityTime | Personal Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- ==============================================
		Favicons
		=============================================== -->
    <link rel="shortcut icon" href="../../Content/assets/favicon.ico">

    <link rel="apple-touch-icon" href="../../Content/assets/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../../Content/assets/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../../Content/assets/apple-touch-icon-114x114.png">

    <!-- ==============================================
		CSS
		=============================================== -->
    <link rel="stylesheet" href="../../Content/css/bootstrap.css">

    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
    <link rel="stylesheet" href="../../Content/css/flexslider.css">
    <link id="main" rel="stylesheet" href="../../Content/css/designr-theme-green.css">
    <link id="theme" rel="stylesheet" href="../../Content/css/designr-theme-green.css">
    <link rel="stylesheet" href="../../Content/css/style-switcher.css">


    <link href="../../Content/Site.css" rel="stylesheet" />
    <!-- ==============================================
		Fonts
		=============================================== -->
    <link href='http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900' rel='stylesheet' type='text/css'>

    <!-- ==============================================
		JS
		=============================================== -->

    <!--[if lt IE 9]>
			<script src="js/respond.min.js"></script>
		<![endif]-->

    <script type="text/javascript" src="/Scripts/js/libs/modernizr.min.js"></script>


</head>

<body data-spy="scroll" data-target="#main-nav" data-offset="200">

    <!-- ==============================================
		MAIN NAV
		=============================================== -->
    <div id="main-nav" class="navbar navbar-fixed-top">
        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#site-nav">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>

                <!-- ======= LOGO ========-->
                <a class="navbar-brand scrollto" href="#home">Muhammad Irfan Butt<br>
                    <span>Software Engineer / Entrepreneur</span></a>
                @*  <a class="navbar-brand scrollto ir-logo" href="#">JOHN DOE<br><span>UI Designer</span></a> *@

            </div>

            <div id="site-nav" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="sr-only">
                        <a href="#home" class="scrollto">Home</a>
                    </li>
                    <li>
                        <a href="#services" class="scrollto">What I do</a>
                    </li>
                    <li>
                        <a href="#about" class="scrollto">About Me</a>
                    </li>
                    <li>
                        <a href="#portfolio" class="scrollto">My Works</a>
                    </li>
                    <li>
                        <a href="#contact" class="scrollto">Contact Me</a>
                    </li>
                </ul>
            </div>
            <!--End navbar-collapse -->

        </div>
        <!--End container -->

    </div>
    <!--End main-nav -->

    <!-- ==============================================
		HEADER
		=============================================== -->
    <header id="home" class="jumbotron">

        <div class="container">

            <div class="message-box clearfix">

                <div class="left-col">
                    <p>
                        I am <span>Irfan Butt</span><br />
                        and I'm
                    </p>
                </div>

                <div class="right-col flexslider home-slider">

                    <ul class="slides">

                        <li>
                            <p>Entrepreneur</p>
                        </li>

                        <li>
                            <p>Soft. Engineer</p>
                        </li>

                        <li>
                            <p>Developer</p>
                        </li>

                        <li>
                            <p>Designer</p>
                        </li>
                    </ul>

                </div>
                <!--End home-slider -->

            </div>
            <!--End message-box -->

        </div>
        <!--End container -->

    </header>
    <!--End header -->

    <!-- ==============================================
		SERVICES
		=============================================== -->
    <section id="services">

        <div class="container">

            <h1 class="section-title scrollimation scale-in">The <span>Services</span> I offer<i class="icon-wrench"></i></h1>

            <div class="row services scrollimation fade-left">
                <div class="col-md-3 text-center">
                    <a href="#none" class="icon"><i class="icon-flag"></i></a>
                    <h2>Social Media Integration</h2>
                </div>
                <div class="col-md-3 details">

                    <p><a href="https://www.facebook.com/">Facebook</a>, <a href="https://twitter.com/">Twitter</a>, <a href="https://www.linkedin.com/">LinkedIn</a>, <a href="https://plus.google.com">Google+ </a>, <a href="https://youtube.com">Youtube </a>and other social media integration within your desktop and web based applications.</p>
                </div>
                <div class="col-md-3 text-center">
                    <a href="#none" class="icon"><i class="icon-code"></i></a>
                    <h2>Development</h2>
                </div>
                <div class="col-md-3 details">
                    <p>Provide custom application development including desktop/web applications, business automations, supply chain & inventory management systems, social networking, social-chat applications, web & system automation and recruitment applications. </p>
                </div>
            </div>
            <!--End row (top) -->

            <div class="row line visible-md visible-lg">
                <div class="col-md-3"><span class="spot"></span></div>
                <div class="col-md-3"><span class="spot"></span></div>
                <div class="col-md-3"><span class="spot"></span></div>
                <div class="col-md-3"><span class="spot"></span></div>
            </div>
            <!--End row -->

            <div class="row services bottom-row scrollimation fade-right">
                <div class="col-md-3 text-center col-md-push-3">
                    <h2>Design</h2>
                    <a href="#none" class="icon"><i class="icon-pencil"></i></a>
                </div>
                <div class="col-md-3 details col-md-pull-3">
                    <p>Responsive web designing with <a href="http://www.w3schools.com/html/html5_intro.asp">HTML5</a> , <a href="http://www.w3schools.com/css/css3_intro.asp">CSS3</a>, <a href="http://getbootstrap.com/">Bootstrap</a> and <a href="http://jquery.com/">jQuery</a> .</p>
                </div>
                <div class="col-md-3 text-center  col-md-push-3">
                    <h2>Consultancy</h2>
                    <a href="#none" class="icon"><i class="icon-rocket"></i></a>
                </div>
                <div class="col-md-3 details  col-md-pull-3">
                    <p>Provide consultancy for your custom solutions in the field of requirement gathering, analysis, system architecture, designing and implementation.</p>
                </div>
            </div>
            <!--End row (bottom)-->

        </div>
        <!--End container -->

    </section>
    <!--End services section-->

    <!-- ==============================================
		ABOUT
		=============================================== -->
    <section id="about">

        <div class="container">

            <div class="row">
                <div class="col-sm-4 col-sm-offset-1 scrollimation fade-right">
                    <img class="img-responsive img-circle img-center" src="../../Content/assets/irfan2.jpg" alt="">
                </div>
                <div class="col-sm-6 col-sm-offset-1 scrollimation fade-left">
                    <h1>Hello, I am Muhammad Irfan Butt...</h1>
                    <p>
                        I'm a <strong>Software Engineer</strong> by profession and an <strong>Entrepreneur</strong> by hobby. I have worked on multiple small to enterprise level applications, products like <a href="http://www.procalltrack.com/" target="_blank">ProCallTrack </a>, <a href="http://www.recruitcraft.com/" target="_blank">RecruitCraft</a>, <a href="#none">AutoTweet</a>, <a href="#none">AutoFacebook</a>,<a href="#none">FacebookGraphSearch</a>, and companies like <a href="http://www.sequelmed.com/" target="_blank">SequelMed</a>, <a href="http://www.systemsltd.com/">Systems Ltd.</a>
                    </p>
                    <a href="#portfolio" class="btn btn-theme transparent scrollto">View my Works</a>
                    <a href="#skills" class="btn btn-theme transparent scrollto">View my Skills</a>
                </div>
            </div>
            <!--End row -->

        </div>
        <!--End container -->

    </section>
    <!--End about section -->

    <!-- ==============================================
		SKILLS
		=============================================== -->
    <section id="skills">

        <div class="container">

            <div class="row skills">
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>
                    <h2 class="text-center">C#/ VB.Net</h2>
                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>
                    <h2 class="text-center">ASP.Net/ MVC 3/4</h2>
                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>
                    <h2 class="text-center">Desktop/ Web Development</h2>
                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="100"><span class="percent">100</span></span>
                    <h2 class="text-center">Social Media Integration</h2>
                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>
                    <h2 class="text-center">SQL Server</h2>
                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>
                    <h2 class="text-center">Architecture Designing/ Planning</h2>
                </div>
                <div class="col-sm-6 col-md-3 text-center">
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>
                    <h2 class="text-center">UI / UX</h2>
                </div>

                <div class="col-sm-6 col-md-2 text-center">
                    <span class="chart" data-percent="90"><span class="percent">90</span></span>
                    <h2 class="text-center">Bootstrap/ HTML/ CSS/ jQuery</h2>
                </div>
            </div>
            <!--End row -->

        </div>
        <!--End container -->

    </section>
    <!--End skills section -->

    <!-- ==============================================
		PORTFOLIO
		=============================================== -->
    <section id="portfolio">

        <div id="portfolio-header" class="text-center">

            <h1 class="section-title scrollimation scale-in">The <span>works</span> I am proud of<i class="icon-pencil"></i></h1>

            <!--==== Portfolio Filters ====-->
            <div id="filter-works">
                <ul>
                    <li class="active">
                        <a href="#fake" data-filter="*">All</a>
                    </li>
                    <li>
                        <a href="#fake" data-filter=".web-design">Web Design</a>
                    </li>
                    <li>
                        <a href="#fake" data-filter=".icons">Icons</a>
                    </li>
                    <li>
                        <a href="#fake" data-filter=".ui-kits">UI Kits</a>
                    </li>
                </ul>
            </div>
            <!--End portfolio filters -->

        </div>
        <!--End portfolio header -->

        <div class="container masonry-wrapper scrollimation fade-in">

            <div id="projects-container">

                <!-- ==============================================
					SINGLE PROJECT ITEM
					=============================================== -->
                <a class="project-item web-design" href="http://www.google.com" data-images="../../Content/assets/projects/webdesign6_540x310_1.jpg,../../Content/assets/projects/webdesign6_540x310_2.jpg,../../Content/assets/projects/webdesign6_540x310_3.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/webdesign6.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Clean &amp; Minimal</h2>
                        <!--Project Title -->
                        <p>google.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/google-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                    </div>

                </a>
                <!-- ==============================================
					END PROJECT ITEM
					=============================================== -->

                <a class="project-item icons ui-kits" href="#somelink" data-images="../../Content/assets/projects/ui3_540x310.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/ui3.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Flat UI Kit</h2>
                        <!--Project Title -->
                        <p>microsoft.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/microsoft-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu. Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item web-design ui-kits" href="#somelink" data-images="../../Content/assets/projects/webdesign1_540x310_1.jpg,../../Content/assets/projects/webdesign1_540x310_2.jpg,../../Content/assets/projects/webdesign1_540x310_3.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/webdesign1.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Singolo</h2>
                        <!--Project Title -->
                        <p>amazon.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/amazon-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item ui-kits" href="http://www.google.com" data-images="../../Content/assets/projects/ui1_540x310.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/ui1.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Chat UI Concept</h2>
                        <!--Project Title -->
                        <p>google.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/google-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item icons" href="#somelink" data-images="../../Content/assets/projects/icons2_540x310.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/icons2.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Login Web Buttons</h2>
                        <!--Project Title -->
                        <p>microsoft.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/microsoft-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu. Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item web-design" href="#somelink" data-images="../../Content/assets/projects/webdesign2_540x310_1.jpg,../../Content/assets/projects/webdesign2_540x310_2.jpg,assets/projects/webdesign2_540x310_3.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/webdesign2.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">LimeLight</h2>
                        <!--Project Title -->
                        <p>amazon.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/amazon-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item web-design" href="http://www.google.com" data-images="../../Content/assets/projects/webdesign5_540x310_1.jpg,../../Content/assets/projects/webdesign5_540x310_2.jpg,../../Content/assets/projects/webdesign5_540x310_3.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/webdesign5.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Organic</h2>
                        <!--Project Title -->
                        <p>google.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/google-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item icons" href="#somelink" data-images="../../Content/assets/projects/icons1_540x310_1.jpg,../../Content/assets/projects/icons1_540x310_2.jpg,../../Content/assets/projects/icons1_540x310_3.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/icons1.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Social Media Icons</h2>
                        <!--Project Title -->
                        <p>microsoft.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/microsoft-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu. Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
                    </div>

                </a>
                <!--End Project Item -->

                <a class="project-item web-design" href="#somelink" data-images="../../Content/assets/projects/webdesign4_540x310_1.jpg,../../Content/assets/projects/webdesign4_540x310_2.jpg">

                    <img class="img-responsive project-image" src="../../Content/assets/projects/webdesign4.jpg" alt=""><!--Project thumb -->

                    <div class="hover-mask">
                        <h2 class="project-title">Explore</h2>
                        <!--Project Title -->
                        <p>amazon.com</p>
                        <!--Project Subtitle -->
                    </div>

                    <!--==== Project Preview HTML ====-->

                    <div class="sr-only project-description">
                        <p class="clearfix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                        <img class="img-responsive img-center" src="../../Content/assets/projects/amazon-logo.png" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
                    </div>

                </a>
                <!--End Project Item -->

            </div>
            <!-- End projects -->

        </div>
        <!-- End container -->

        <!-- ==============================================
			PROJECT PREVIEW MODAL
			=============================================== -->
        <div id="project-modal" class="modal fade">

            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>

                    <div class="modal-body">

                        <div class="left-col">
                            <img class="img-responsive" src="../../Content/assets/imac.png" alt="">
                            <div class="loader"></div>
                            <div class="image-wrapper"></div>
                        </div>

                        <h1></h1>

                        <div class="project-descr"></div>

                        <div class="clearfix"></div>

                        <p class="text-center"><a class="btn btn-theme"><i class="icon-external-link"></i>Visit Website</a></p>

                    </div>
                    <!-- End modal-body -->

                </div>
                <!-- End modal-content -->

            </div>
            <!-- End modal-dialog -->

        </div>
        <!-- End modal -->

    </section>
    <!-- End portfolio section -->

    <!-- ==============================================
		TWITTER FEED
		=============================================== -->
    <section id="twitter">
        <div class="container">


            <h1 class="section-title scrollimation scale-in">My <span>Clients</span> I work with</h1>

            <div class="text-center">

                <a href="#portfolio" class="btn btn-theme transparent scrollto">ProCallTrack</a>

                <a href="#portfolio" class="btn btn-theme transparent scrollto">RecruitCraft</a>

              
            </div>
            <div class="row scrollimation fade-in">
                @*<div class="col-sm-1 twitter-icon">
                    <i class="icon-twitter"></i> 
                </div>*@

                <div class="col-sm-11">

                    @*  <div id="twitter-slider" class="flexslider" data-widget-id="386017398488186880" data-tweets-length="3">
                    </div>*@
                </div>


            </div>
            <!-- End row -->
        </div>
        <!-- End container -->

    </section>
    <!-- End Twitter section -->

    <!-- ==============================================
		CONTACT
		=============================================== -->
    <section id="contact">

        <div class="container">

            <h1 class="section-title scrollimation scale-in">Keep in <span>Touch</span> with me</h1>

            <div class="row">

                <div class="col-sm-5 contact-info scrollimation fade-right">

                    <p>You can contant me for idea discussion, custom application development, custom web designing and development, social media applications and marketing </p>

                    <address>
                        Muhammad Irfan Butt<br>
                        mirfan00@live.com<br>
                        (+92) 334-4072-970<br>
                    </address>

                    <ul class="socials">
                        <li><a href="https://twitter.com/ibutt00"><i class="icon-twitter"></i></a></li>
                        <li><a href="https://facebook.com/mirfan00"><i class="icon-facebook"></i></a></li>
                        <li><a href="http://pk.linkedin.com/in/muhammadirfanbutt"><i class="icon-linkedin"></i></a></li>
                        <li><a href="#fake"><i class="icon-google-plus"></i></a></li>
                    </ul>

                </div>

                <form id="contact-form" class="col-sm-7 scrollimation fade-left" action="contact.php" method="post" novalidate>

                    <div class="form-group">
                        <label class="control-label" for="contact-name">Name</label>
                        <div class="controls">
                            <i class="icon-user"></i>
                            <input id="contact-name" name="contactName" placeholder="My name is..." class="form-control input-lg requiredField" type="text" data-error-empty="Please enter your name">
                        </div>
                    </div>
                    <!-- End name input -->

                    <div class="form-group">
                        <label class="control-label" for="contact-mail">Email</label>
                        <div class=" controls">
                            <i class="icon-envelope"></i>
                            <input id="contact-mail" name="email" placeholder="Please respond at..." class="form-control input-lg requiredField" type="email" data-error-empty="Please enter your email" data-error-invalid="Invalid email address">
                        </div>
                    </div>
                    <!-- End email input -->

                    <div class="form-group">
                        <label class="control-label" for="contact-message">Message</label>
                        <div class="controls">
                            <i class="icon-comment"></i>
                            <textarea id="contact-message" name="comments" placeholder="I wanna talk about..." class="form-control input-lg requiredField" rows="5" data-error-empty="Please enter your message"></textarea>
                        </div>
                    </div>
                    <!-- End textarea -->

                    <p>
                        <button name="submit" type="submit" class="btn btn-theme btn-lg" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="icon-location-arrow"></i>Send Message</button>
                    </p>
                    <input type="hidden" name="submitted" id="submitted" value="true" />

                </form>
                <!-- End contact-form -->

            </div>
            <!-- End row -->

        </div>
        <!-- End container -->

    </section>
    <!-- End contact section -->

    <!-- ==============================================
		FOOTER
		=============================================== -->
    <footer id="main-footer">

        <div class="container">

            <div class="row">

                <div class="col-sm-6 left-col">
                    <h1 class="small-logo">Muhammad Irfan Butt<br>
                        <span>Software Engineer / Entrepreneur</span></h1>
                    <ul class="footer-nav">
                        <li><a class="scrollto" href="#home">Home</a></li>
                        <li><a class="scrollto" href="#services">Services</a></li>
                        <li><a class="scrollto" href="#portfolio">Portfolio</a></li>
                        <li><a class="scrollto" href="#contact">Contact</a></li>
                    </ul>
                    <p>&copy;Copyright 2014 / All Rights Reserved</p>
                </div>

                <div class="col-sm-6 right-col">
                    <h2>Who Am I?</h2>
                    <p>I am very active in learning new technologies, reading tech blogs, exploring tech world, working on new ideas and developing creative and useful applications.</p>
                </div>

            </div>
            <!-- End row -->

        </div>
        <!-- End container -->

    </footer>
    <!-- End footer -->

    <!-- ==============================================
		SCRIPTS
		=============================================== -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/Scripts/js/libs/jquery-1.8.2.min.js">\x3C/script>')</script>

    <script src="/Scripts/js/libs/bootstrap.min.js"></script>
    <script src='/Scripts/js/jquery.scrollto.js'></script>
    <script src='/Scripts/js/jquery.flexslider.min.js'></script>
    <script src='/Scripts/js/twitterFetcher_v10_min.js'></script>
    <script src='/Scripts/js/jquery.masonry.min.js'></script>
    <script src="/Scripts/js/waypoints.min.js"></script>
    <script src="/Scripts/js/jquery.easypiechart.js"></script>
    <script src="/Scripts/js/jquery.backstretch.min.js"></script>
    <script src="/Scripts/js/contact.js"></script>
    <script src="/Scripts/js/designr.js"></script>
    <script src="/Scripts/js/style-switcher.js"></script>

    <!--Style Switcher-->
    <div id="style-switcher">
        <div id="toggle-switcher"><i class="icon-cogs"></i></div>
        <h1>Change Color</h1>
        <ul>
            <li id="cyan"></li>
            <li id="cyan2"></li>
            <li id="red"></li>
            <li id="orange"></li>
            <li id="green"></li>
            <li id="grass"></li>
            <li id="purple"></li>
            <li id="pink"></li>
        </ul>
    </div>
    <!--End Style Switcher-->

</body>

</html>
